<template>
	<!-- 表格 -->
	<el-table class="pageTableClass" :data="taskNoPage" height="calc(100vh - 380px)" :loading="isLoading">
		<el-table-column label="序号" align="center" width="70">
			<template #default="scope">
				{{ (paginationParams.current - 1) * paginationParams.pageSize + scope.$index + 1 }}
			</template>
		</el-table-column>
		<el-table-column prop="code" min-width="150" label="计划编号" align="center" />
		<el-table-column prop="activeLine" min-width="180" label="触发时间" align="center" />
		<el-table-column prop="actualTimeCost" min-width="150" label="实际用时" align="center" />
		<el-table-column prop="equipmentName" min-width="200" label="设备名称" align="center" />
		<el-table-column prop="deadLine" min-width="180" label="截止时间" align="center" />
		<el-table-column prop="planTimeCost" min-width="100" label="计划用时" align="center" />
		<el-table-column prop="createName" min-width="180" label="创建人" align="center" />
		<el-table-column prop="teamLeaderName" min-width="180" label="班组长" align="center" />
		<el-table-column prop="type" min-width="180" label="类型" align="center" />
		<el-table-column label="操作" align="center" fixed="right" width="100">
			<template #default="scope">

				<el-button style="color:#4160beed" @click="handleEdit(scope.row)" text :icon="CircleCheck" size="small"
									 plain>完成
				</el-button>
			</template>
		</el-table-column>
	</el-table>
	<div class="pagePagination">
		<el-pagination background v-model:current-page="paginationParams.current"
									 v-model:page-size="paginationParams.pageSize" layout="total, sizes, prev, pager, next"
									 :total="pageTotal"
									 @size-change="handleSizeChange" @current-change="handleCurrentChange" />
	</div>
	<!-- 弹框 -->
	<el-dialog v-model="dialogVisible" title="确认完成任务" width="60%">
		<el-table class="pageTableClass" :data="contentDialog">
			<el-table-column prop="content" min-width="150" label="点检内容" align="center" />
			<el-table-column prop="result" min-width="200" label="结果" align="center">
				<template #default="scope">
					<el-select v-model="scope.row.result" placeholder="请选择结果">
						<el-option label="合格" value="合格" />
						<el-option label="不合格" value="不合格" />
					</el-select>
				</template>
			</el-table-column>
			<el-table-column prop="describe" min-width="200" label="原因描述" align="center">
				<template #default="scope">
					<el-input v-model="scope.row.describe" type="textarea" placeholder="请输入原因描述" />
				</template>
			</el-table-column>
		</el-table>
		<template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="handleSubmit">确定</el-button>
            </span>
		</template>
	</el-dialog>
</template>

<script setup>
import { defineProps, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { CircleCheck } from '@element-plus/icons-vue';

const dialogVisible = ref(false);
const form = ref({});
const formLabelWidth = ref('120px');
const contentDialog = ref([]);
const props = defineProps({
	paginationParams: Object,
	onSubmit: Function,
	handleSizeChange: Function,
	handleCurrentChange: Function,
	taskNoPage: Array,
	pageTotal: Number,
	equipmentData: Object,
	fetchPage: Function
});

const handleEdit = (row) => {
	form.value = { ...row };
	console.log(row, 'row');
	const ArrayData = JSON.parse(row?.result)?.map(item => {
		return {
			content: item?.content,
			result: item?.result,
			describe: item?.describe

		};
	});
	console.log(ArrayData, 'ArrayData');
	contentDialog.value = ArrayData;
	dialogVisible.value = true;
};

const handleSubmit = () => {
	// 提交表单数据
	props.onSubmit({
		...form.value,
		status: 'FINISHED',
		result: JSON.stringify(contentDialog.value)
	}, (() => {
		dialogVisible.value = false;
	}));


};
</script>

<style scoped>
.pageTableClass {
	width: 100%;
}

.pagePagination {
	margin-top: 20px;
	text-align: center;
}
</style>